/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, toastLong, consoleLog } from '../../utils/utilsToast'
import AlertManager from '../../components/common/AlertManager'
export default class ZichanDetail extends Component {

    constructor(props) {
        super(props);
        const { params } = this.props.navigation.state;
        this.state =  {
            id: params.zichan_id,
            target: '',
            status: 1,
            custodian: '',
            style: '',
            principal: '',
            redemption_principal: '',
            profit: '',
            profit_all: '',
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.willFocus = this.props.navigation.addListener('willFocus', (payload) => {
            this.loadNetData();
        })
    }

    componentWillUnmount(){
        this.willFocus.remove();
        this.onBack();
    }

    onBack = () => {
        this.props.navigation.state.params.onCallBack();
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        let url = ServicesApi.Myassetdetail;
        let data = {
            id: this.state.id,
            member_id: global.user.userData.id,
            token: global.user.userData.token
        }

        Services.post(url, data)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log(result.data);
                    this.updateState({
                        target: result.data.target,
                        status: result.data.status,
                        custodian: result.data.custodian,
                        style: result.data.style,
                        principal: result.data.principal,
                        redemption_principal: result.data.redemption_principal,
                        profit: result.data.profit,
                        profit_all: result.data.profit_all,
                    })
                }else{
                    toastLong(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    cancelZichan = () => {
        const params = {
            title: '温馨提示',
            detail: '尊敬的会员，您确定要删除本基金的投资记录吗？',
            actions: [
                { title: '取消', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                    
                } },
                { title: '删除', onPress: () => { 
                    let url = ServicesApi.Myassetdel;
                    let data = {
                        id: this.state.id,
                        member_id: global.user.userData.id,
                        token: global.user.userData.token
                    }

                    Services.post(url, data)
                        .then( result => {
                            if (result && result.code == StatusCode.SUCCESS_CODE) {
                                console.log(result.data);
                                toastShort(result.msg);
                                this.onBack();
                            }else{
                                toastLong(result.msg);
                            }
                        })
                        .catch( error => {
                            toastShort('服务器请求失败，请稍后重试！');
                        })
                } }
            ]
        }
        AlertManager.show(params)
    }

    editZichan = (compent, zichan_id) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            zichan_id: zichan_id,
            onCallBack:()=>{
                console.log('1');
            }
        })
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {this.state.target}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                    rightButton = {UtilsView.getRightKefuBlackButton(() => this.onPushNavigator('Kefu'))}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <ScrollView keyboardShouldPersistTaps={'handled'}>
                    <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>投资人姓名</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{global.invest.investInfo.truename}</Text>
                                </View>                                    
                            </View>
                        </View> 
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>份额管理人</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{this.state.custodian}</Text>
                                </View>                                    
                            </View>
                        </View> 
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>投资标的</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{this.state.target}</Text>
                                </View>                                    
                            </View>
                        </View> 
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>投资方式</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{this.state.style}</Text>
                                </View>                                    
                            </View>
                        </View> 
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>投资本金</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{this.state.principal}元</Text>
                                </View>                                    
                            </View>
                        </View> 
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>已赎回投资本金</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{this.state.redemption_principal}元</Text>
                                </View>                                    
                            </View>
                        </View> 
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>已结算收益</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{this.state.profit}元</Text>
                                </View>                                    
                            </View>
                        </View> 
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>权益总额</Text>
                                <View style={GlobalStyles.flexRowEnd}>
                                    <Text style={{color: GlobalStyles.themeColor}}>{this.state.profit_all}元</Text>
                                </View>                                    
                            </View>
                        </View> 
                    </View> 
                    
                </ScrollView> 
                    
                {this.state.status == 0 ?
                <View style={styles.botBar}>
                    <TouchableOpacity onPress={()=>{this.cancelZichan()}} style={[styles.botLeft]}>
                        <Text style={styles.botLeftText}>删除</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => {this.editZichan('ZichanEdit', this.state.id)}} style={styles.botRight}>
                        <Text style={styles.botRightText}>编辑</Text>
                    </TouchableOpacity> 
                </View>
                : null }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
    botBar: {
        height: 54,
        backgroundColor: '#fff',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderTopColor: '#ececec',
        borderTopWidth: 1,
    },
    botLeft: {
        height: 54,
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    botLeftIco: {
        height: 24,

    },
    botLeftText: {
        fontSize: 18,
        color: '#666',
        height: 20,
        lineHeight: 20,
    },
    botRight: {
        flex: 1.5,
        backgroundColor: GlobalStyles.themeColor,
        height: 54,
        justifyContent: 'center',
        alignItems: 'center',

    },
    botRightText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold'
    },
});
